<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/eui/element-ui.css">

    <script src="../static/js/vue.min.js"></script>
    <script src="../static/js/axios.min.js"></script>
    <script src="../static/eui/index.js"></script>

    <script src="../static/js/App.js"></script>
    <script src="../static/js/auth.js"></script>
    <script src="../static/js/checkIsLogin.js"></script>
    <script src="../static/js/RefreshComponent.js"></script>

    <style>
        body {
            font-size: 14px;
            color: #606266;
        }
        .main{
            display: flex;
            justify-content:flex-start;
        }
        /*左侧*/
        .mianLeft{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 70%;
        }
        .mianLeft_row{
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            height: 110px;
        }
        .mianLeft_dai {
            display: flex;
            flex-wrap: nowrap;
            justify-content:center;
            align-items:center;
            box-shadow: 0 0 3px 0px #c0c4cced;
            padding: 10px;
            border-radius: 5px;
            width: 60%;
        }
        .mianLeft_dai span {
            display: flex;
            flex-direction: column;
            text-align:center;
            vertical-align:middle;
            align-content: center;
            height: 95%;
            width: 100%;
            margin-top: 10px;
         }
        .mianLeft_dai_num {
            width: 100%;
            line-height: 50px;
            text-align:center;
            vertical-align:middle;
            /*background-color: #f5f7fa;*/
            color: dodgerblue;
            border-radius:50%;
            font-size: 20px;
            /*margin-left: 30px;*/
        }
        .mianLeft_dai_des {
            width: 100%;
            color: #8D8D8D;
            font-size: 15px;
            margin-top: 10px;
        }
        .mianLeft_msg{
            box-shadow: 0 0 3px 0px #c0c4cced;
            padding: 10px;
            border-radius: 5px;
            width: 40%;
            margin-left: 10px;
        }
        .mianLeft_cy{
            display: flex;
            justify-content: space-around;
            align-items:center;
            flex-wrap: wrap;
            box-shadow: 0 0 3px 0px #c0c4cced;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
            height: 128px;
            margin-top: 10px;
        }
        .mianLeft_cy_title{
            width: 100%;
            height: 26px;
            display: flex;
            justify-content: space-between;
        }
        .mianLeft_cy_box{
            width: 120px;
            height: 120px;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }
        .mianLeft_cy_box li{
            font-size: 58px;
            color: #1E9FFF;
            text-align:center;
        }
        .mianLeft_cy_box span{
            color: #8D8D8D;
            font-size: 15px;
            margin-top: 10px;
            text-align:center;
            vertical-align:middle;
        }


        .mianLeft_yx {
            width: 100%;
            height: 460px;
            box-shadow: 0 0 3px 0px #c0c4cced;
            padding: 2px;
            border-radius: 5px;
            margin-top: 10px;
        }


        /*右侧*/
        .mianR{
            width: 27.5%;
            margin-left: 10px;
        }
        .box1 {
            box-shadow: 0 0 3px 0px #c0c4cced;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
            height: 250px;
            margin-bottom: 10px;
        }
        .box2 {
            width: 100%;
            height: 440px;
            box-shadow: 0 0 3px 0px #c0c4cced;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <refresh-comm></refresh-comm>
    <div class="main">
        <div class="mianLeft">
            <div class="mianLeft_row">
                <div class="mianLeft_dai">
                    <span>
                        <div class="mianLeft_dai_num">12</div>
                        <div class="mianLeft_dai_des">待付款订单</div>
                    </span>
                    <span>
                        <div class="mianLeft_dai_num">125</div>
                        <div class="mianLeft_dai_des">待发货订单</div>
                    </span>
                    <span>
                        <div class="mianLeft_dai_num">358</div>
                        <div class="mianLeft_dai_des">已售完商品</div>
                    </span>
                    <span>
                        <div class="mianLeft_dai_num">119</div>
                        <div class="mianLeft_dai_des">待看商品评论</div>
                    </span>

                </div>

                <div class="mianLeft_msg">
                    <span>营销活动</span>
                </div>
            </div>
            <div class="mianLeft_cy">
                <div class="mianLeft_cy_title">
                    <span>常用功能</span>
                    <li class="el-icon-setting"></li>
                </div>
                <div class="mianLeft_cy_box" >
                    <li class="el-icon-s-goods"></li>
                    <span>发布商品</span>
                </div>

                <div class="mianLeft_cy_box" >
                    <li class="el-icon-s-promotion"></li>
                    <span>营收概况</span>
                </div>

                <div class="mianLeft_cy_box" >
                    <li class="el-icon-s-custom"></li>
                    <span>会员管理</span>
                </div>

                <div class="mianLeft_cy_box" >
                    <li class="el-icon-data-analysis"></li>
                    <span>交易分析</span>
                </div>

                <div class="mianLeft_cy_box" >
                    <li class="el-icon-message-solid"></li>
                    <span>消息通知</span>
                </div>

            </div>


            <div class="mianLeft_yx">
                <img src="../static/img/analysis.jpg">
            </div>

        </div>

        <div class="mianR">

            <div class="box1">
                用户总览
            </div>

            <div class="box2">
                商品总览
            </div>

        </div>
    </div>

</div>


</body>

</html>